<style>
.map {
  height: 100%;
  overflow: hidden;
}
.mouse-position {
  position: absolute;
  bottom: 15px;
  right: 15px;
  z-index: 999;
  padding: 3px 6px;
  background-color: white;
  border-radius: 4px;
  font-size: 12px;
}
</style>

<div class="mouse-position" id="mousePosition"> 4 | 22.52,113.94</div>
<div class="map" id="map"></div>

<script>
  const map = L.map('map', {
    center: [22.52, 113.94],
    zoom: 4
  })
  const gdLayer = L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
    subdomains: '1234'
  })
  gdLayer.addTo(map)
  const dom = document.getElementById('mousePosition')
  map.on('mousemove', e => {
    const {lng, lat} = e.latlng
    const pos = [lng, lat].map(v => v.toFixed(4)).join(',')
    dom.innerText = `${map.getZoom()} | ${pos}`
  })
  map.on('zoomend', e => {
    const text = dom.innerText
    dom.innerText = `${map.getZoom()} | ${text.split('|')[1]}`
  })
</script>